<template>
	<view class="container">
		<view class="content">
			<view class="tab_box" v-if="logisticsFnc.packageList.length > 1">
				<scroll-view class="tab_box_scroll" :scroll-x="true" :show-scrollbar="false">
					<view class="tab_item_box">
						<view :class="['tab_item', tabFnc.tabIndex == tabIndex ? 'tab_item_act' : '']"
							v-for="(tabItem,tabIndex) in logisticsFnc.packageList" :key="tabIndex"
							@tap="tabFnc.tabBtn(tabIndex)">
							包裹{{tabIndex + 1}}({{logisticsFnc.logisticsData.allCount}}件)
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="card_box goods_info">
				<view class="packages">
					<template v-if="logisticsFnc.packageList.length > 1">
						包裹{{tabFnc.tabIndex + 1}}
					</template>
					商品
				</view>
				<view class="goods_content" @tap="openMerchBill">
					<view class="goods_content_info" v-if="logisticsFnc.logisticsData.deliveryBillGoods?.length == 1">
						<image class="goods_info_img" :src="logisticsFnc.logisticsData.deliveryBillGoods[0].thumPic"
							mode=""></image>
						<view class="goods_info_text">
							<view class="goods_info_text_name">
								<!-- <view class="">预售</view> -->
								<text class="">{{logisticsFnc.logisticsData.deliveryBillGoods[0].name}}</text>
							</view>
							<view class="goods_info_text_spec"
								v-if="logisticsFnc.logisticsData.deliveryBillGoods[0].skuProperties">
								<text
									v-for="(specItem, specIndex) in JSON.parse(logisticsFnc.logisticsData.deliveryBillGoods[0].skuProperties || '[]')"
									:key="specIndex">
									{{ specItem.value }}
									<text class="m-l-10 m-r-10"
										v-if="JSON.parse(logisticsFnc.logisticsData.deliveryBillGoods[0].skuProperties || '[]').length - 1 != specIndex">;</text>
								</text>
							</view>
							<view class="goods_info_text_spec" v-else> 默认规格</view>
						</view>
					</view>
					<view class="goods_infos" v-if="logisticsFnc.logisticsData.deliveryBillGoods?.length > 1">
						<scroll-view class="goods_infos_scroll" :scroll-x="true" :show-scrollbar="false">
							<view class="goods_infos_scroll_box">
								<view class="goods_infos_box"
									v-for="(goodItem,goodIndex) in logisticsFnc.logisticsData.deliveryBillGoods"
									:key="goodIndex">
									<image class="goods_infos_goods_img" :src="goodItem.thumPic" mode="">
									</image>
									<!-- <view class="goods_infos_tips">预售</view> -->
									<view class="goods_infos_goods_num">× {{goodItem.count}}</view>
								</view>
							</view>

						</scroll-view>
					</view>
					<view class="goods_info_price">
						<!-- <view class="goods_info_price_text">¥180</view> -->
						<view class="goods_info_price_num">共{{logisticsFnc.logisticsData.allCount}}件</view>
					</view>
				</view>
			</view>

			<view class="card_box logistics_info">
				<view class="logistics_info_title">
					<view class="logistics_info_title_text">
						{{logisticsFnc.logisticsData.shipperCode}}：{{ logisticsFnc.logisticsData.logisticCode }}
					</view>
					<view class="logistics_info_title_copy" @tap="copyText(logisticsFnc.logisticsData.logisticCode)">复制
					</view>
				</view>
				<view class="logistics_info_content">
					<template v-if="logisticsFnc.logisticsData.state">
						<view class="logistics_info_content_item"
							v-for="(logisticsItem,logisticsIndex) in logisticsFnc.logisticsData.data">
							<view class="logistics_item_icon">
								<view class="logistics_item_icon_circle"></view>
								<view class="logistics_item_icon_line"></view>
							</view>
							<view class="logistics_item_text">
								<view class="logistics_item_text_status">{{logisticsItem.context}}</view>
								<view class="logistics_item_text_times">{{logisticsItem.time}}</view>
							</view>
						</view>
					</template>

				</view>
			</view>
		</view>
		<uni-popup ref="popupMerchBillRef" type="bottom" background-color="#F9F6F6" border-radius="24rpx 24rpx 0 0">
			<view class="merch_bill">
				<view class="popup_title">
					<view class="popup_title_text">
						<text>商品清单</text>（共{{logisticsFnc.logisticsData.allCount}}件）
					</view>
					<uni-icons @tap="popupMerchBillRef.close()" type="closeempty" size="24"></uni-icons>
					<!-- <image class="popup_close" @tap="popupMerchBillRef.close()"
						:src="iconUrl + '188.png'" mode=""></image> -->
				</view>
				<view class="merch_bill_list">
					<scroll-view class="merch_bill_list_scroll" :scroll-y="true" :show-scrollbar="false">
						<view class="list_item"
							v-for="(merchBillItem,merchBillIndex) in logisticsFnc.logisticsData.deliveryBillGoods"
							:key="merchBillIndex">
							<image class="list_item_img" :src="merchBillItem.thumPic" mode=""></image>
							<view class="list_item_text">
								<view class="list_item_text_name"><text
										v-if="merchBillItem.presellOn == 1">预售</text>{{merchBillItem.name}}</view>
								<view class="list_item_text_spec" v-if="merchBillItem.skuProperties">
									<text
										v-for="(specItem, specIndex) in JSON.parse(merchBillItem.skuProperties || '[]')"
										:key="specIndex">
										{{ specItem.value }}
										<text class=""
											v-if="JSON.parse(merchBillItem.skuProperties || '[]').length - 1 != specIndex">;</text>
									</text>
								</view>
								<view class="list_item_text_spec" v-else> 默认规格</view>
								<view class="list_item_text_num">
									<view>¥{{merchBillItem.price}}</view>
									<text> × {{merchBillItem.count}}</text>
								</view>
								<view class="list_item_text_times">{{deliveryDate(merchBillItem)}}</view>
							</view>
						</view>
					</scroll-view>

				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import api from '@/api'
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	import { getPresalesDelivery } from '@/pages/shopping/cart/util/cart.js';
	const popupMerchBillRef = ref()
	const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-")
	onLoad(async (options) => {
		logisticsFnc.orderId = options.orderId
		await logisticsFnc.getPackage(options.orderId)
	})
	onShow(() => {

	})
	const tabFnc = reactive({
		tabIndex: 0,
		tabBtn: async (index) => {
			if (index == tabFnc.tabIndex) { return }
			tabFnc.tabIndex = index
			logisticsFnc.requestParam(tabFnc.tabIndex)
		}
	})
	const logisticsFnc = reactive({
		orderId: '',
		logisticsData: [], //物流信息
		packageList: [], // 包裹信息
		haveExpressInfo: 0,//是否有物流信息 0-加载中，1-有物流信息，2-无物流信息
		parameter: {}, //获取每个单号的详细物流信息的请求参数
		getPackage: async (orderId) => {
			const res : any = await api({
				method: 'get',
				url: `/mall/shopping/order/package/${orderId}/0`
			})
			if (res.data) {
				logisticsFnc.packageList = res.data
				logisticsFnc.haveExpressInfo = 1; //有物流信息
				if (logisticsFnc.packageList && logisticsFnc.packageList.length > 0) {
					logisticsFnc.haveExpressInfo = 1; //有物流信息
					logisticsFnc.requestParam(tabFnc.tabIndex); //请求物流详情的参数
				} else {
					logisticsFnc.haveExpressInfo = 2; //无物流信息
				}
				switch (logisticsFnc.packageList.shipperCode) {
					case 'SF':
						logisticsFnc.packageList.shipperCode = '顺丰快递';
						break;
					case 'HTKY':
						logisticsFnc.packageList.shipperCode = '百世快递';
						break;
					case 'DBL':
						logisticsFnc.packageList.shipperCode = '德邦快递';
						break;
				}
			}
		},
		getLogistics: async (param) => {
			const res : any = await api({
				method: 'get',
				url: `/mall/shopping/order/logistics_details/${param.id}/${param.singleNumber}/${param.express}/${param.senderMobile}`
			})
			if (res.data) {
				logisticsFnc.haveExpressInfo = 1; //有物流信息

				switch (res.data.shipperCode) {
					case 'SF':
						res.data.shipperCode = '顺丰快递';
						break;
					case 'HTKY':
						res.data.shipperCode = '百世快递';
						break;
					case 'DBL':
						res.data.shipperCode = '德邦快递';
						break;
				}

				/* let wuliuList = resData.data;
			
				if (wuliuList) {
					wuliuList.forEach((item) => {
						item.time = this.getTimeformate(item.time);
					});
				} */
				res.data.allCount = 0
				res.data.deliveryBillGoods.forEach(item => {
					item.subtotal = Number(item.expressFee)
					if (item.spotDeliveryTypeMsg) {
						if (item.spotDeliveryTypeMsg.substr(0, 1) == 0) {
							item.spotMsg = item.spotDeliveryTypeMsg.substr(1, item.spotDeliveryTypeMsg.length);
							item.spotMsg = `${item.spotMsg ? item.spotMsg.split(",")[0].split(":")[0] : 15}点前下单当天发货，${item.spotMsg ? item.spotMsg.split(",")[0].split(":")[0] : 15}
							点后的订单次日发货${item.spotMsg && item.spotMsg.split(",")[1] == 1 ?
									'周末及法定节假日顺延' : ''}`;
						} else {
							//item.spotMsg=item.spotDeliveryTypeMsg;
							item.spotMsg = item.spotDeliveryTypeMsg.substr(1, item.spotDeliveryTypeMsg.length);
						}
					}
					res.data.allCount += item.count
				})
				logisticsFnc.logisticsData = res.data; //更新后的物流信息
				console.log(logisticsFnc.logisticsData)
				//console.log("物流详情2:", this.expressInfo);
			} else {
				logisticsFnc.haveExpressInfo = 2; //无物流信息
			}
		},
		requestParam(e) {
			//获取物流详情的请求参数
			for (var i = 0; i < logisticsFnc.packageList.length; i++) {
				logisticsFnc.parameter.id = logisticsFnc.packageList[e].id;
				logisticsFnc.parameter.singleNumber = logisticsFnc.packageList[e].waybillNum;
				logisticsFnc.parameter.express = logisticsFnc.packageList[e].express;
				logisticsFnc.parameter.senderMobile = logisticsFnc.packageList[e].senderMobile;
			}

			logisticsFnc.getLogistics(logisticsFnc.parameter); //获取物流详情跟踪信息
		},
	})
	const openMerchBill = async () => {
		popupMerchBillRef.value.open()
	}
	const deliveryDate = (goodInfo) => {
		const presalesDelivery = getPresalesDelivery(goodInfo);
		if (presalesDelivery) {
			return presalesDelivery;
		} else if (goodInfo.spotDeliveryTypeMsg) {
			return goodInfo.spotMsg;
		}
	}
	const copyText = (data) => {
		uni.setClipboardData({
			data,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				});
			}
		});
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
		min-height: 100vh;
		background-color: #F9F6F6;
		line-height: 1;
	}

	.content {
		width: 686rpx;
		margin: 0 auto;
	}

	.tab_box {
		padding-top: 32rpx;

		.tab_box_scroll {
			width: 100%;

		}

		.tab_item_box {
			display: flex;
			align-items: center;
		}

		.tab_item {
			margin-right: 24rpx;
			padding: 16rpx;
			background-color: #fff;
			border-radius: 240rpx;
			font-size: 26rpx;
			color: #7C807F;
		}

		.tab_item_act {
			background-color: #FEDFE8;
			color: #FF6084;
		}
	}

	.card_box {
		padding: 40rpx 32rpx;
		border-radius: 24rpx;
		background-color: #fff;

	}

	.goods_info {
		margin: 32rpx 0;
		padding: 32rpx;
		.goods_content {
			display: flex;
			position: relative;

			.goods_content_info {
				display: flex;

				.goods_info_img {
					margin-right: 16rpx;
					width: 160rpx;
					height: 160rpx;
					border-radius: 24rpx;
				}

				.goods_info_text {
					width: 334rpx;

					.goods_info_text_name {
						margin-bottom: 16rpx;
						display: flex;

						view {
							margin-right: 4rpx;
							padding: 2rpx 8rpx 4rpx 8rpx;
							border: 1rpx solid #6363FF;
							border-radius: 20rpx;
							font-size: 24rpx;
							color: #6363FF;
						}

						text {
							font-size: 30rpx;
							color: #1B2120;
						}
					}

					.goods_info_text_spec {
						font-size: 24rpx;
						color: #808080;
					}
				}
			}

			.goods_infos {
				width: 520rpx;

				.goods_infos_scroll {
					width: 100%;

				}

				.goods_infos_scroll_box {
					display: flex;
				}

				.goods_infos_box {
					flex-shrink: 0;
					margin-right: 16rpx;
					position: relative;
					width: 160rpx;
					height: 160rpx;
					border-radius: 24rpx;
					overflow: hidden;

					.goods_infos_goods_img {
						width: 160rpx;
						height: 160rpx;
						border-radius: 24rpx;
					}

					.goods_infos_tips {
						position: absolute;
						top: 16rpx;
						left: 16rpx;
						padding: 6rpx 8rpx;
						font-size: 24rpx;
						color: #6363FF;
						background: #FFFFFF;
						border-radius: 64rpx;
					}

					.goods_infos_goods_num {
						position: absolute;
						bottom: 0;
						right: 0;
						background: rgba(0, 0, 0, 0.35);
						padding: 8rpx;
						border-radius: 24rpx 0 0 0;
						font-size: 20rpx;
						color: #fff;
					}
				}
			}

			.goods_info_price {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 128rpx;
				height: 160rpx;
				box-shadow: -12rpx 0 20rpx -18rpx rgba(0, 0, 0, 0.2);
				position: absolute;
				right: -32rpx;

				.goods_info_price_text {
					margin-bottom: 16rpx;
					font-size: 28rpx;
					color: #FF6084;
					font-weight: bold;
				}

				.goods_info_price_num {
					font-size: 24rpx;
					color: #7C807F;
				}
			}
		}

		.packages {
			margin-bottom: 48rpx;
			font-size: 32rpx;
			color: #1B2120;
			font-weight: bold;
		}
	}

	.logistics_info {

		.logistics_info_title {
			margin-bottom: 40rpx;
			padding-bottom: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #E6E6E6;

			.logistics_info_title_text {
				font-size: 32rpx;
				color: #1B2120;
				font-weight: bold;
			}

			.logistics_info_title_copy {
				font-size: 28rpx;
				color: #FF6084;
				text-decoration: underline;
			}
		}

		.logistics_info_content {
			.logistics_info_content_item {
				display: flex;
				justify-content: space-between;

				.logistics_item_icon {
					display: flex;
					flex-direction: column;
					align-items: center;

					.logistics_item_icon_circle {
						margin-bottom: 4rpx;
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						background-color: #D0D1D2 //background-color: #FF6084;
					}

					.logistics_item_icon_line {
						margin-bottom: 4rpx;
						width: 2rpx;
						background-color: #E4E6E6;
						height: 100%;
					}
				}

				.logistics_item_text {
					padding-bottom: 80rpx;
					margin-top: -6rpx;
					width: 540rpx;
					color: #7C807F;
					line-height: 1.4;

					.logistics_item_text_status {
						font-size: 30rpx;

					}

					.logistics_item_text_times {
						font-size: 26rpx;
					}
				}


			}

			.logistics_info_content_item:first-child {
				.logistics_item_icon {
					.logistics_item_icon_circle {
						background-color: #FF6084;
					}

				}

				.logistics_item_text {
					.logistics_item_text_status {
						color: #1B2120;

					}

				}
			}

			.logistics_info_content_item:last-child {
				.logistics_item_icon {
					.logistics_item_icon_line {
						height: 40rpx;
					}
				}
			}
		}
	}

	.merch_bill {
		//background-color: #F9F6F6;
		padding: 32rpx;

		.popup_title {
			margin-bottom: 44rpx;
			padding-top: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.popup_title_text {
				font-size: 26rpx;
				color: #808080;

				text {
					font-size: 36rpx;
					color: #1A1A1A;
					font-weight: bold;
				}
			}

			.popup_close {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.merch_bill_list {
			//width: 686rpx;
			padding: 40rpx 32rpx;
			background-color: #fff;
			border-radius: 24rpx;

			.merch_bill_list_scroll {
				max-height: 60vh;
			}

			.list_item {
				margin-bottom: 40rpx;
				padding-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #E4E6E6;

				.list_item_img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 24rpx;
				}

				.list_item_text {
					width: 398rpx;

					.list_item_text_name {
						margin-bottom: 16rpx;
						font-size: 30rpx;
						color: #1B2120;
						line-height: 1.4;
						font-weight: bold;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						/* 限制显示的行数为2 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;

						text {
							margin-right: 4rpx;
							padding: 4rpx 8rpx;
							display: inline-block;
							font-size: 24rpx;
							color: #6363FF;
							line-height: 1;
							border: 1rpx solid #6363FF;
							border-radius: 20rpx;
							font-weight: normal;
						}

					}

					.list_item_text_spec {
						margin-bottom: 32rpx;
						font-size: 26rpx;
						color: #7C807F;
					}

					.list_item_text_num {
						margin-bottom: 32rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 30rpx;

						view {
							font-weight: bold;
							color: #FF6084;
						}

						text {
							color: #1B2120;
						}
					}

					.list_item_text_times {
						margin-top: -6rpx;
						font-size: 24rpx;
						color: #6363FF;
						line-height: 1.4;
					}
				}
			}

			.list_item:last-child {
				padding-bottom: 0;
				margin-bottom: 0;
				border: none;
			}
		}
	}
</style>